<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>vant3</title>
    <link rel="stylesheet" href="./style/index.css"/>
    <link rel="stylesheet" href="./style/base.css"/>
    <script src="./js/vue@3.js"></script>
    <script src="./js/vant.min.js"></script>
    <script src="./js/utils.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/request.js"></script>
<!--    <script src="./js/jigsaw.min.js"></script>-->
</head>
<body>
<div id="app">
<!--    <page-header :title="title"></page-header>-->
    <div class="login-main">
        <div class="logo">
            <img src="https://fastly.jsdelivr.net/npm/@vant/assets/logo.png">
            <span class="van-doc-header__title">Vant 3</span>
        </div>
        <div class="login-form">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field
                            v-model="loginForm.username"
                            name="用户名"
                            left-icon="user-o"
                            label=""
                            placeholder="请输入用户名"
                            :rules="[{ required: true, message: '请填写用户名' }]"
                    ></van-field>
                    <van-field
                            v-model="loginForm.password"
                            type="password"
                            name="密码"
                            label=""
                            left-icon="bag-o"
                            placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]"
                    ></van-field>
                </van-cell-group>
<!--                <div id="captcha"></div>-->
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        登录
                    </van-button>
                </div>
            </van-form>
        </div>

    </div>
</div>
<script>
    // optionAPI
    const LoginVueApp = {
        name: 'LoginView',
        data() {
            return {
                loginForm: {
                    username: 'doria',
                    password: '123456'
                }
            }
        },
        mounted() {
            // console.log(this.list)
        },
        methods: {
            onSubmit() {
                console.log('search')
                $request.post('/login', this.loginForm).then(res => {
                    console.log(res)
                    localStorage.setItem('mobile_yy', JSON.stringify({token: res.token, user: res.user}))
                    location.href='./index.html'
                })
            }
        }
    }

    const app = Vue.createApp(LoginVueApp)
    app.use(vant);
    // app.use(vant.Lazyload); // 如果需要懒加载需要单独引入
    app.component('PageHeader', PageHeader)
    app.component('PageFooter', PageFooter)
    app.mount('#app')

    // jigsaw.init({
    //     el: document.getElementById('captcha'),
    //     onSuccess: function() {
    //         console.log('captcha success')
    //         // document.getElementById('msg').innerHTML = '登录成功！'
    //     },
    //     onFail: cleanMsg,
    //     onRefresh: cleanMsg
    // })
    // function cleanMsg() {
    //     // document.getElementById('msg').innerHTML = ''
    // }

</script>
</body>
</html>
